/**
 * 
 */

var canvas;
var stage;
var screen_width;
var screen_height;
var bmpAnimation1;
var bmpAnimation2;
var bmpAnimation3;
var bmpFlower1;
var bmpFlower2;

var imgFish1 = new Image();
var imgFish2 = new Image();
var imgFish3 = new Image();
var imgFlower1 = new Image();
var imgFlower2 = new Image();

function init() {
	canvas = document.getElementById("homeCanvas");
	/* Fish 1 */
	imgFish1.onload = handleImageLoad;
	imgFish1.onerror = handleImageError;
	imgFish1.src = "resources/frontpage/imgs/f3.png";
	/* Fish 2 */
	imgFish2.onload = handleImageLoad;
	imgFish2.onerror = handleImageError;
	imgFish2.src = "resources/frontpage/imgs/f2.png";
	/* Fish 3 */
	imgFish3.onload = handleImageLoad;
	imgFish3.onerror = handleImageError;
	imgFish3.src = "resources/frontpage/imgs/f2.png";
	imgFlower1.onload = handleImageLoad;
	imgFlower1.onerror = handleImageError;
	imgFlower1.src = "resources/frontpage/imgs/f2.gif";
	imgFlower2.onload = handleImageLoad;
	imgFlower2.onerror = handleImageError;
	imgFlower2.src = "resources/frontpage/imgs/bg_f1.png";
}

function reset() {
	stage.removeAllChildren();
	createjs.Ticker.removeAllListeners();
	stage.update();
}

function handleImageLoad(e) {
	startGame();	
}

function startGame() {
	// create a new stage and point it at our canvas:
	stage = new createjs.Stage(canvas);

	// grab canvas width and height for later calculations:
	screen_width = canvas.width;
	screen_height = canvas.height;

	// create spritesheet and assign the associated data.
	var spriteSheet1 = new createjs.SpriteSheet({
		// image to use
		images : [ imgFish1 ],
		// width, height & registration point of each sprite
		frames : {
			width : 120,
			height : 120,
			regX : 50,
			regY : 50
		},
		animations : {
			walk : [ 0, 10, "walk", 26 ]
		}
	});
	var spriteSheet2 = new createjs.SpriteSheet({
		// image to use
		images : [ imgFish2 ],
		// width, height & registration point of each sprite
		frames : {
			width : 120,
			height : 120,
			regX : 50,
			regY : 50
		},
		animations : {
			walk : [ 0, 10, "walk", 26 ]
		}
	});
	var spriteSheet3 = new createjs.SpriteSheet({
		// image to use
		images : [ imgFish3 ],
		// width, height & registration point of each sprite
		frames : {
			width : 120,
			height : 120,
			regX : 50,
			regY : 50
		},
		animations : {
			walk : [ 0, 10, "walk", 26 ]
		}
	});
	// to save file size, the loaded sprite sheet only includes left facing animations
	// we could flip the display objects with scaleX=-1, but this is expensive in most browsers
	// instead, we generate a new sprite sheet which includes the flipped animations
	createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet1, true, false, true);
	createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet2, true, false, true);
	createjs.SpriteSheetUtils.addFlippedFrames(spriteSheet3, true, false, true);
	// create a BitmapAnimation instance to display and play back the sprite sheet:
	bmpAnimation1 = new createjs.BitmapAnimation(spriteSheet1);
	bmpAnimation2 = new createjs.BitmapAnimation(spriteSheet2);
	bmpAnimation3 = new createjs.BitmapAnimation(spriteSheet3);
	bmpFlower1 = new createjs.Bitmap(imgFlower1.src);
	bmpFlower2 = new createjs.Bitmap(imgFlower2.src);
	// set the registration point (the point it will be positioned and rotated around)
	// to the center of the frame dimensions:
	bmpAnimation1.regX = bmpAnimation1.spriteSheet.frameWidth / 2 | 0;
	bmpAnimation1.regY = bmpAnimation1.spriteSheet.frameHeight / 2 | 0;
	
	bmpAnimation2.regX = bmpAnimation1.spriteSheet.frameWidth / 2 | 0;
	bmpAnimation2.regY = bmpAnimation1.spriteSheet.frameHeight / 2 | 0;
	
	bmpAnimation3.regX = bmpAnimation1.spriteSheet.frameWidth / 2 | 0;
	bmpAnimation3.regY = bmpAnimation1.spriteSheet.frameHeight / 2 | 0;
	

	// start playing the first sequence:
	bmpAnimation1.gotoAndPlay("walk_h"); //animate
	bmpAnimation2.gotoAndPlay("walk_h"); //animate
	bmpAnimation3.gotoAndPlay("walk_h"); //animate
	// set up a shadow. Note that shadows are ridiculously expensive. You could display hundreds
	// of animated rats if you disabled the shadow.
	bmpAnimation1.shadow = new createjs.Shadow("#eee", 0, 25, 18);
	bmpAnimation2.shadow = new createjs.Shadow("#eee", 0, 25, 22);
	bmpAnimation3.shadow = new createjs.Shadow("#eee", 0, 25, 22);

	bmpAnimation1.name = "fish1";
	bmpAnimation1.direction =90;
	bmpAnimation1.vX = 0.5;
	bmpAnimation1.vY = 0.5;
	bmpAnimation1.x = 200;
	bmpAnimation1.y = screen_height / 2;
	bmpAnimation1.rotation = 45;
	bmpAnimation1.scaleX =0.5;
	bmpAnimation1.scaleY =0.5;
	
	bmpAnimation2.name = "fish2";
	bmpAnimation2.direction =135;
	bmpAnimation2.vX = 0.5;
	bmpAnimation2.vY = 0.5;
	bmpAnimation2.x = screen_width/2-100;
	bmpAnimation2.y = screen_height*2/3;
	bmpAnimation2.rotation = 45;
	bmpAnimation2.scaleX =0.8;
	bmpAnimation2.scaleY =0.8;
	
	bmpAnimation3.name = "fish3";
	bmpAnimation3.direction =-90;
	bmpAnimation3.vX = 0.6;
	bmpAnimation3.vY = 0.6;
	bmpAnimation3.x = screen_width/2-100;
	bmpAnimation3.y = screen_height*4/5;
	bmpAnimation3.rotation = 0;
	bmpAnimation3.scaleX =0.8;
	bmpAnimation3.scaleY =0.8;
		
	bmpFlower1.x = 50;
	bmpFlower1.y = screen_height-273;
	bmpFlower1.scaleX = 0.8;
	bmpFlower1.scaleY = 0.8;
	
	bmpFlower2.x = 0;
	bmpFlower2.y = screen_height-257;
	bmpFlower2.scaleX = 0.8;
	bmpFlower2.scaleY = 0.8;
	// have each monster start at a specific frame
	bmpAnimation1.currentFrame = 10;
	stage.addChild(bmpAnimation1);
	bmpAnimation2.currentFrame = 10;
	stage.addChild(bmpAnimation2);
	bmpAnimation3.currentFrame = 10;
	stage.addChild(bmpAnimation3);
	stage.addChild(bmpFlower2);
	stage.addChild(bmpFlower1);
	
	// we want to do some work before we update the canvas,
	// otherwise we could use Ticker.addListener(stage);
	createjs.Ticker.addListener(window);
	createjs.Ticker.useRAF = true;
	createjs.Ticker.setFPS(60);

}

//called if there is an error loading the image (usually due to a 404)
function handleImageError(e) {
	console.log("Error Loading Image : " + e.target.src);
}

function tick() {
	// Hit testing the screen width, otherwise our sprite would disappear
	if (bmpAnimation1.x >= screen_width - 100) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation1.direction = -90;
		bmpAnimation1.gotoAndPlay("walk");

	}
	if (bmpAnimation1.y >= screen_height - 100) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation1.direction = -90;
		bmpAnimation1.gotoAndPlay("walk");

	}
	if (bmpAnimation1.y < screen_height/2) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation1.direction = 90;
		bmpAnimation1.gotoAndPlay("walk_h");

	}
	if (bmpAnimation1.x < 100) {
		// We've reached the left side of our screen
		// We need to walk right now
		bmpAnimation1.direction = 90;
		bmpAnimation1.gotoAndPlay("walk_h");

	}

	// Moving the sprite based on the direction & the speed
	if (bmpAnimation1.direction == 90) {
		bmpAnimation1.x += bmpAnimation1.vX;
		bmpAnimation1.y += bmpAnimation1.vY;
	} else {
		bmpAnimation1.x -= bmpAnimation1.vX;
		bmpAnimation1.y -= bmpAnimation1.vY;
	}

	if (bmpAnimation2.x >= screen_width/2 - 50) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation2.direction = 0;
		bmpAnimation2.direction = -45;
		bmpAnimation2.gotoAndPlay("walk");

	}
	
	if (bmpAnimation2.x < 50) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation2.direction =90;
		console.log(bmpAnimation2.direction);
		bmpAnimation2.gotoAndPlay("walk_h");

	}
	
	if (bmpAnimation2.y >= screen_height - 100) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation2.direction = 315;
		bmpAnimation2.gotoAndPlay("walk");

	}

	if (bmpAnimation2.y < screen_height/2) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation2.y = screen_height/2;
		bmpAnimation2.direction = 270;
		bmpAnimation2.gotoAndPlay("walk");
		bmpAnimation2.rotation=0;	
	}
	// Moving the sprite based on the direction & the speed
	if (bmpAnimation2.direction == 135) {
		bmpAnimation2.x += bmpAnimation2.vX;
		bmpAnimation2.y += bmpAnimation2.vY;
		
	}else if(bmpAnimation2.direction == 315){
		bmpAnimation2.x -= bmpAnimation2.vX;
		bmpAnimation2.y -= bmpAnimation2.vY;
		bmpAnimation2.rotation=45;
	}else if(bmpAnimation2.direction == 270){
		bmpAnimation2.x -= bmpAnimation2.vX;
		bmpAnimation2.x -= bmpAnimation2.vX;
	}else if(bmpAnimation2.direction == 90 ){
		bmpAnimation2.x += bmpAnimation2.vX;
		
	}else if(bmpAnimation2.direction == -45 ){
		bmpAnimation2.x -= bmpAnimation2.vX;
		bmpAnimation2.y += bmpAnimation2.vY;
		bmpAnimation2.rotation=-45;	
	}
	
	
	if (bmpAnimation3.x > screen_width/2-50 ) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation3.x = screen_width/2-50;
		bmpAnimation3.direction = 180;
		bmpAnimation3.rotation = 180;
		bmpAnimation3.gotoAndPlay("walk");

	}
	if (bmpAnimation3.x < 100) {
		// We've reached the left side of our screen
		// We need to walk right now
		bmpAnimation3.direction = 45;
		bmpAnimation3.gotoAndPlay("walk");

	}
	if (bmpAnimation3.y >= screen_height - 100) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation3.direction = 360;
		bmpAnimation3.gotoAndPlay("walk");

	}
	if (bmpAnimation3.y < 100) {
		// We've reached the right side of our screen
		// We need to walk left now to go back to our initial position
		bmpAnimation3.direction = 90;
		bmpAnimation3.gotoAndPlay("walk");

	}
	

	// Moving the sprite based on the direction & the speed
	if (bmpAnimation3.direction == -90) {
		bmpAnimation3.x -= bmpAnimation3.vX;
		bmpAnimation3.rotation=180;
		
		//bmpAnimation3.y += bmpAnimation1.vY;
	}else if(bmpAnimation3.direction == 45){
		bmpAnimation3.rotation=225;
		bmpAnimation3.x += bmpAnimation3.vX;
		bmpAnimation3.y += bmpAnimation3.vY;
	}else if(bmpAnimation3.direction == 360){
		bmpAnimation3.rotation=135;
		bmpAnimation3.x += bmpAnimation3.vX;
		bmpAnimation3.y -= bmpAnimation3.vY;
	}else if(bmpAnimation3.direction == 180){
		bmpAnimation3.x -= bmpAnimation3.vX;
		bmpAnimation3.rotation=0;
		//bmpAnimation3.y -= bmpAnimation3.vY;
	}
	// update the stage:
	stage.update();
}
